<!--
* @description  : 案件-运输信息-物流中转站
* @descriptionDetail: 案件-运输信息-物流中转站
* @copyright    : 浙江烟草
* @author       : sy
* @create       : 2022-07-10 16:15:38
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :isWhite="true" backText="返回" :title="typeInfo.typeName"></theme-navbar>
    <!-- #endif -->
    <view class="content">
      <view class="party-info-content">
        <view style="width: calc(100% - 30px);">
          <form-section title="基本信息"></form-section>
        </view>
        <view class="party-info-box">
          <u-form :model="dataForm" :rules="rules" :errorType="errorType" ref="uForm">
            <view>
              <u-form-item label="名称" :label-position="labelPosition" :required="isTrue" prop="logiName">
                <u-input placeholder="请输入" v-model="dataForm.logiName" />
              </u-form-item>
              <u-form-item label="工商执照" :label-position="labelPosition" :required="isTrue" prop="busiLiceNo">
                <u-input placeholder="请输入" v-model="dataForm.busiLiceNo" />
              </u-form-item>
              <u-form-item label="物流中转站地址" :label-position="labelPosition">
                <view class="logi-addr">
                  <u-input
                    type="select"
                    :disabled="true"
										:custom-style="pointerStyle"
                    placeholder="中转地行政区划选择"
                    v-model="areaCoinNames"
                    @click="nativeNameSelectShow = true"
                  ></u-input>
                  <u-line :color="$theme.u_border_color" style="margin: 10rpx 0;"></u-line>
                  <u-row gutter="16">
                    <u-col span="6">
                      <u-input :border="true" placeholder="街道" v-model="dataForm.street"></u-input>
                    </u-col>
                    <u-col span="6">
                      <u-input :border="true" placeholder="小区门牌地址" v-model="dataForm.community">
                      </u-input>
                    </u-col>
                  </u-row>
                </view>
              </u-form-item>
              <u-form-item label="gis经纬度" :label-position="labelPosition">
                <u-input placeholder="请填写经纬度" :disabled="true" v-model="dataForm.gis"></u-input>
                <u-icon name="map-fill" size="44" :color="$theme.u_type_primary" @click="setLocation"></u-icon>
              </u-form-item>
              <u-form-item label="负责人" :label-position="labelPosition">
                <u-input placeholder="请输入" v-model="dataForm.pic" />
              </u-form-item>
              <u-form-item label="联系电话" :label-position="labelPosition" :required="isTrue" prop="phone">
                <u-input placeholder="请输入" v-model="dataForm.phone" />
              </u-form-item>
              <u-form-item :label-position="labelPosition" label="备注">
                <u-input type="textarea" height="100" :auto-height="true" placeholder="请输入" v-model="dataForm.remark" />
              </u-form-item>
              <u-form-item label="上传图片" :label-position="labelPosition">
                <view class="zk-img-content">
                  <m-upload
                    :deletable="true"
                    :maxCount="picIds"
                    width="150rpx"
                    height="150rpx"
                    :file-list="fileList"
                    :multiple="true"
                    index="fileList"
                    :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.c_case_logitrans}"
                    upApiUrl="uploadBase64ForApp"
                    ref="filePicUpload"
                    @on-list-change="changeUpload"
                  >
                  </m-upload>
                </view>
              </u-form-item>
            </view>
          </u-form>
          <!-- 行政区划选择 -->
          <u-popup mode="bottom" height="80%" v-model="nativeNameSelectShow">
            <area-select @choose="nativeNameSelectShowComfir"></area-select>
          </u-popup>
        </view>
      </view>
      <view class="space-content"></view>
      <view class="submit-btns btn-other-cls">
        <u-button class="u-btn" type="primary" @click="confirm">
          保存
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import areaSelect from "@/components/area-select.vue"
import commonService from "@/service/common/common.service";
import LogiTransInfo from "@/declare/case/LogiTransInfo.js";
import caseService from '@/service/case/case.service.js';
import mUpload from '@/components/m-upload.vue';
import FormSection from "@/components/form-section.vue";
export default {
  components:{
    areaSelect,
    mUpload,
    FormSection,
  },
  data(){
    return {
      nativeNameSelectShow: false,// 行政区选择框是否打开
      areaCoinNames: "",
      dataForm:LogiTransInfo.createNew(),
      rules:{
        logiName: [{
          required: true,
          message: '请输入名称',
          trigger: ['change', 'blur',],
        },],
        busiLiceNo: [{
          required: true,
          message: '请输入工商执照',
          trigger: ['change', 'blur',],
        },],
        phone:[{
          required: true,
          message: '请输入手机号码',
          trigger: ['change', 'blur',],
        },{
          validator: () => {
            if(this.dataForm.phone){
              return this.$u.test.mobile(this.dataForm.phone);
            }else{
              return true;
            }
          },
          message: '手机号码不正确',
          trigger: ['change','blur',],
        },],},
      errorType: ['border-bottom','message',],
      isTrue: true,
      labelPosition:"top",
      border: false,
      typeInfo:{},// 类型 添加/编辑
      fileList: [],
      picIds: '20',
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-27 fsx start
			pointerStyle: {
			  marginRight: "5px",
				pointerEvents: "none !important"
			},
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-27 fsx end
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  // 加载初始周期方法
  onLoad() {
    let prevParam = this.getRouteParam();
    this.dataForm.caseUuid = prevParam.caseUuid;
    if (prevParam.type) {
      this.typeInfo.type = prevParam.type;
      this.typeInfo.typeName = prevParam.type == 'add' ? "添加中转站" : "编辑中转站";
    } else {
      this.typeInfo = {};
    }
    if(prevParam.param){
      this.dataForm =  prevParam.param;
      if (this.dataForm.photo) {
        let photoArr = this.dataForm.photo.split(',');
        photoArr.forEach((val) => {
          this.fileList.push({
            gfiId: val,
          });
        });
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if(!this.$u.test.isEmpty(this.dataForm.provCode) && !this.$modal.isMuniCity(this.dataForm.provCode)){
        this.areaCoinNames = commonService.getPersonLocal(this.dataForm.provCode, true).areaName || "";
      }
      if(!this.$u.test.isEmpty(this.dataForm.cityCode)){
        this.areaCoinNames += commonService.getPersonLocal(this.dataForm.cityCode, true).areaName || "";
      }
      if(!this.$u.test.isEmpty(this.dataForm.countyCode)){
        this.areaCoinNames += commonService.getPersonLocal(this.dataForm.countyCode, true).areaName || "";
      }
      if(!this.$u.test.isEmpty(this.dataForm.gisX)){
        this.dataForm.gis = `${this.dataForm.gisX},${this.dataForm.gisY}`;
      }
    },
    nativeNameSelectShowComfir(areas) {
      if(this.$modal.isMuniCity(areas[0].proCode)){
        this.areaCoinNames = [areas[0].admdivName, areas[0].countryName,].join("");
      }else{
        this.areaCoinNames = [areas[0].proName, areas[0].admdivName, areas[0].countryName,].join("");
      }
      this.dataForm.provCode = areas[0].proCode;
      this.dataForm.cityCode = areas[0].admdivCode;
      this.dataForm.countyCode = areas[0].countryCode;
      this.nativeNameSelectShow = false;
    },
    // 经纬度
    setLocation(){
      let self = this;
      // #ifdef H5-DINGDING
      this.$deviceApi.getLocationByMap(this.dataForm.gisY, this.dataForm.gisX).then(latlng => {
        self.$set(self.dataForm, "gis", `${latlng[1]},${latlng[0]}`);
        self.$set(self.dataForm, "gisX",latlng[1]);
        self.$set(self.dataForm, "gisY", latlng[0]);
      }).catch(err => {
        self.$api.toast('获取位置信息失败');
      });
      // #endif

      // #ifndef H5-DINGDING
      this.$u.route('pages/commonPage/modifyLocationMap');
      // #endif
    },
    // 数据返回操作
    updateBackState(obj) {
      let self = this;
      // 经纬度
      if(obj.pos){
        self.$set(self.dataForm,'gis',`${obj.pos.longitude},${obj.pos.latitude}`);
        self.$set(self.dataForm,'gisX',obj.pos.longitude);
        self.$set(self.dataForm,'gisY',obj.pos.latitude);
      }
    },
    // 保存
    confirm(){
      let self = this;
      this.$refs.uForm.validate(valid => {
        if (valid) {
          if(this.areaCoinNames || this.dataForm.street || this.dataForm.community){
            this.dataForm.address = `${this.areaCoinNames}${this.dataForm.street}${this.dataForm.community}`;
          }
          let {toJsonStr,updateContent,updateTime,...params} = self.dataForm;
          let ids = [];
          if(this.fileList.length > 0){
            this.fileList.forEach((item) => {
              ids.push(item.gfiId);
            });
            params.photo = ids.join(',');
          }
          caseService.saveLogi(params).then(res => {
            if(res.success){
              this.$u.success('保存成功',2000,() => {
                self.backPrev({
                  paramKey: "formItem",
                  param :{
                    type:'trans',
                  },
                });
              });
            }else{
              this.$u.toast(res.msg);
            }
          }).catch(err => {
            this.$u.toast(err);
          })
        }
      });
    },
    // 上传/删除图片事件
    changeUpload(list, key) {
      if (list.length > 0) {
        this.fileList = [...list,];
      } else {
        this.fileList = [];
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../case_common.scss";
.page{ padding:0; }
.logi-addr{
 display: flex;
 flex-direction: column;
 width: 100%;
}
</style>
